<template>
    <div class="over-view" :style="{ backgroundImage:`url(${$imageSrcFormatter(backgroundSrc)})` }">
        <!-- 分数 -->
        <div v-if="backgroundSrc=='09结果页/很遗憾/背景.png'" class="over-score">{{ score }}</div>
        <div v-else class="over-score-success">{{ score }}</div>
        <!-- 按钮组 -->
        <div class="over-btn-group">
            <ScaleButton src="09结果页/很遗憾/再测一次.png" @MmvTap="handleReload"></ScaleButton>
            <ScaleButton src="09结果页/很遗憾/分享转发.png" @MmvTap="handleShare"></ScaleButton>
        </div>
        <!-- 分享遮罩 -->
        <MaskView :visible.sync="showShare">
            <div style="width:100%;height:100%" @click="showShare=false">
                <MmvImage class="over-share-icon" src="11开始答题-分享页/分享箭头.png"></MmvImage>
            </div>
        </MaskView>
        <!-- 长按保存 -->
        <img v-if="saveBackgroundImageBlob" class="over-save-img" :src="saveBackgroundImageBlob">
    </div>
</template>

<script>
import MmvCanvas from '@/utils/canvas';

export default {
    name: 'OverView',
    data() {
        return {
            showShare: false,
            saveBackgroundImageBlob: '',
        };
    },
    computed: {
        score() {
            return this.$store.state.QuestionBank.score;
        },
        backgroundSrc() {
            if (this.score >= 90) {
                return '09结果页/称号C/背景.png';
            } else if (this.score >= 70) {
                return '09结果页/称号B/背景.png';
            } else if (this.score >= 60) {
                return '09结果页/称号A/背景.png';
            }
            return '09结果页/很遗憾/背景.png';
        },
        saveBackgroundSrc() {
            if (this.score >= 90) {
                return '12保存至手机相册海报/称号C/背景.jpg';
            } else if (this.score >= 70) {
                return '12保存至手机相册海报/称号B/背景.jpg';
            } else if (this.score >= 60) {
                return '12保存至手机相册海报/称号A/背景.jpg';
            }
            return '';
        },
    },
    created() {
        // 提交成绩
        this.$store.dispatch('app/handleSubmitData', this.score);
        // 调试用
        // this.$store.commit('QuestionBank/SET_SCORE', 60);
        // 绘制分享图
        this.handleDrawSaveImage();
    },
    methods: {
        handleReload() {
            this.$router.replace({ name: 'Home' }).catch(() => { });
            this.$store.commit('QuestionBank/RESET_LIST');
        },
        handleShare() {
            this.showShare = true;
        },
        handleDrawSaveImage() {
            if (!this.saveBackgroundSrc) {
                console.log('成绩不足！');
                return;
            }
            const image = this.$imageSrcFormatter(this.saveBackgroundSrc);
            const avatar = window.wx_avatar;
            const nickname = this.$store.state.app.userInfo.name || window.wx_nickname;
            const client = new MmvCanvas(image, avatar, nickname);
            client.run().then(() => {
                this.saveBackgroundImageBlob = client.canvas.toDataURL('image/png');
            });
            this.$destroy(() => {
                document.body.removeChild(client.canvas);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.over-view {
    @include mmv-view-backage;
    display: flex;
    align-items: center;
    justify-content: center;

    .over-score {
        position: absolute;
        top: 42vw;
        // left: 53vw;
        right: 35vw;
        font-size: 10vw;
        font-weight: bolder;
        color: $main;
        font-family: "微软雅黑";
    }
    .over-score-success {
        position: absolute;
        top: 119vw;
        right: 32vw;
        font-size: 10vw;
        font-weight: bolder;
        color: $main;
        font-family: "微软雅黑";
    }

    .over-btn-group {
        width: 70vw;
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 164vw;
        z-index: $OverBtnGroupZIndex;
    }

    .over-share-icon {
        float: right;
        margin: 10vw;
        animation: point 1s linear infinite alternate;
    }

    .over-save-img {
        width: 100vw;
        // height: 145vw;
        object-fit: contain;
        position: relative;
        z-index: $OverSaveImgZIndex;
        opacity: 0;
    }
}

@keyframes point {
    from {
        transform: translate(0vw, 3vw);
    }
    to {
        transform: translate(3vw, 0vw);
    }
}
</style>
